<template>
  <div ref="radarChart" :style="{ width: '100%', height: '400px' }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'RadarChart',
  data() {
    return {
      chartInstance: null,
      data: {
        indicators: [
          { name: '指标1', max: 100 },
          { name: '指标2', max: 100 },
          { name: '指标3', max: 100 },
          { name: '指标4', max: 100 },
          { name: '指标5', max: 100 }
        ],
        data1: [80, 90, 70, 85, 95],
        data2: [60, 70, 80, 50, 90]
      }
    };
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.radarChart);
    this.renderChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    this.chartInstance.dispose();
  },
  methods: {
    renderChart() {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          indicator: this.data.indicators,
          shape: 'circle',
          splitNumber: 5,
          name: {
            textStyle: {
              color: '#999',
              backgroundColor: '#fff',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          splitLine: { lineStyle: { width: 1, color: '#ddd' } },
          splitArea: { areaStyle: { color: ['#fafafa', '#fff'] } }
        },
        series: [
          {
            name: '数据对比',
            type: 'radar',
            data: [
              {
                value: this.data.data1,
                name: '数据1',
                areaStyle: { color: 'rgba(255, 0, 0, 0.5)' }
              },
              {
                value: this.data.data2,
                name: '数据2',
                areaStyle: { color: 'rgba(0, 0, 255, 0.5)' }
              }
            ]
          }
        ]
      };

      this.chartInstance.setOption(option);
    },
    resizeChart() {
      this.chartInstance.resize();
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
